<template>
  <div class="dialog">
    <el-dialog :title="title" :visible.sync="visible" :close-on-click-modal="false" width="65%" top="20vh">
      <el-form :model="createForm" label-width="120px" label-suffix=":" :rules="rules" ref="createForm">
        <div class="page-panel-title" style="margin-top: 0;">费用科目信息</div>
        <div class="page-panel">
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="模板名称" prop="name">
                <el-input v-model.trim="createForm.name" placeholder="请输入模板名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="费用科目来源" prop="dataSource">
                <el-select v-model="createForm.dataSource" placeholder="请选择费用科目来源" style="width: 100%;">
                  <el-option v-for="it in dataSourceList" :key="it.dictItemCode" :label="it.dictItemName"
                    :value="it.dictItemCode" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="费用科目类型" prop="expenseAccount">
                <el-select v-model="createForm.expenseAccount" placeholder="请选择费用科目类型" style="width: 100%;">
                  <el-option label="成本类科目" value="01" />
                  <el-option label="损益类科目" value="02" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="费用明细科目" prop="expenseItemList">
                <el-cascader v-model="createForm.expenseItemList" :options="expenseItemTree"
                  :props="{ value: 'dictItemCode', label: 'dictItemName' }" placeholder="请选择费用明细科目"
                  style="width: 100%;" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="收费项说明" prop="itemDescription">
                <el-input v-model.trim="createForm.itemDescription" placeholder="请输入收费项说明"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="单价" prop="itemPrice">
                <el-input v-model.trim="createForm.itemPrice" type="number" placeholder="请输入单价"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="计价单位" prop="pricingUnit">
                <el-input v-model.trim="createForm.pricingUnit" placeholder="请输入计价单位"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="收入支出类型" prop="type">
                <el-select v-model="createForm.type" placeholder="请选择收入支出类型" style="width: 100%;">
                  <el-option label="收入" value="01" />
                  <el-option label="支出" value="02" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="财务周期" prop="type">
                <el-select v-model="createForm.financialCycle" placeholder="财务周期" style="width: 100%;">
                  <el-option label="月" value="01" />
                  <el-option label="季" value="02" />
                  <el-option label="年" value="03" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <!-- <div class="page-panel-title">费用支出明细</div>
        <div class="page-pane2">
          <el-button size="mini" type="info" @click="addRecord()">新增</el-button>
        </div>
        <div class="page-panel" v-for="(item, index) in recordList" :key="index">
          <el-row :gutter="24">
            <el-col :span="11">
              <el-form-item label="费用项名称">
                <el-select v-model="item.coaName" placeholder="请选择费用项" @change="onSelectRecord(item.coaName, index)"
                  style="width: 100%;">
                  <el-option v-for="it in expendList" :key="it.id" :label="it.coaName" :value="it.coaName" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="费用单价" prop="coaPrice">
                <el-input type="number" v-model.trim="item.coaPrice" placeholder="请输入费用单价"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="11">
              <el-form-item label="数量" prop="coaNumber">
                <el-input type="number" v-model.trim="item.coaNumber" placeholder="请输入数量"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="计价单位" prop="pricing">
                <el-input v-model.trim="item.pricingUnit" placeholder="请输入计价单位"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="2">
              <el-button size="small" type="danger" @click="deleteRecord(index)">删除</el-button>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="11">
              <el-form-item label="财务周期" prop="financialCycle">
                <el-select v-model="item.financialCycle" placeholder="请选择财务周期" style="width: 100%;">
                  <el-option label="月" value="1" />
                  <el-option label="季" value="2" />
                  <el-option label="年" value="3" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="合计金额" prop="totalPrice">
                <el-input v-model.trim="item.totalPrice" type="number" placeholder="请输入合计金额"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </div> -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeNetWorker()">关 闭</el-button>
        <el-button type="primary" @click="confirmData('createForm')">保 存</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  getDictionaryItemMap,
  getDictionaryItemTree
} from '@/api/common'
import {
  storeFinanceCoaAdd,
  storeFinanceCoaUpdate,
  storeFinanceCoaQueryById,
  storeFinanceRecordList
} from '@/api/business'
export default {
  name: "SubjectDialog",
  data () {
    return {
      title: "",
      visible: false,
      dataSourceList: [],
      expenseItemTree: [],
      createForm: {},
      expendList: [],
      recordList: [],
      rules: {
        name: [
          { required: true, message: "请输入模板名称", trigger: "blur" },
        ],
        dataSource: [
          { required: true, message: "请选择费用科目来源", trigger: "blur" },
        ],
        expenseAccount: [
          { required: true, message: "请选择费用科目类型", trigger: "blur" },
        ],
        expenseItemList: [
          { required: true, message: "请选择费用明细科目", trigger: "blur" },
        ],
        itemPrice: [
          {
            required: true,
            pattern:
              /^(([1-9]\d*|[0]{1,1})|([0][.]{1}[0-9]{0,2}[1-9]+)|([1-9]\d*[.]{1}[0-9]+))$/,
            message: "请输入大于0的数",
            trigger: "blur"
          },
        ],
        pricingUnit: [
          { required: true, message: "请输入计价单位", trigger: "blur" },
        ],
        // coaNumber: [
        //   { required: true, message: "请输入数量", trigger: "blur" },
        //   { pattern: /^[0-9]*$/, "message": "只能输入正整数" }
        // ],
        // coaPrice: [
        //   { required: true, message: "请输入费用单价", trigger: "blur" },
        //   {
        //     required: true,
        //     pattern:
        //       /^(([1-9]\d*|[0]{1,1})|([0][.]{1}[0-9]{0,2}[1-9]+)|([1-9]\d*[.]{1}[0-9]+))$/,
        //     message: "请输入大于0的数",
        //   },
        // ],
      },
    }
  },
  created () { },
  mounted () { },
  methods: {
    add () {
      this.title = "新增";
      this.createForm = {};
      this.recordList = [];
      this.init();
      this.addRecord();
      this.visible = true;
    },
    edit (val) {
      this.title = "编辑";
      this.recordList = [];
      this.init();
      storeFinanceCoaQueryById({ id: val.id }).then(res => {
        if (res.data.code == 0) {
          this.createForm = res.data.data;
          if (res.data.data.recordList) {
            this.recordList = res.data.data.recordList;
          }
        }
      });
      this.visible = true;
    },
    init () {
      getDictionaryItemMap({ codeArr: "dataSource" }).then(res => {
        if (res.data.code == 0) {
          this.dataSourceList = res.data.data.dataSource
        }
      })
      getDictionaryItemTree({ code: "expenseItem" }).then(res => {
        if (res.data.code == 0) {
          this.expenseItemTree = res.data.data
        }
      })
      storeFinanceRecordList({ page: "1", size: "1000" }).then(res => {
        if (res.data.code == 0) {
          this.expendList = res.data.data.records
        }
      })
    },
    // 增加行
    addRecord () {
      this.recordList.push({
        coaName: "",
        coaNumber: "",
        coaPrice: "",
        financialCycle: "",
        pricingUnit: "",
        totalPrice: ""
      });
    },
    // 删除行
    deleteRecord (index) {
      this.recordList.splice(index, 1);
      this.onPriceChange()
    },
    onSelectRecord (coaName, index) {
      this.expendList.forEach(element => {
        if (element.coaName == coaName) {
          this.recordList[index].coaName = element.coaName;
          this.recordList[index].coaPrice = element.coaPrice;
          this.recordList[index].coaNumber = element.coaNumber;
          this.recordList[index].financialCycle = element.financialCycle;
          this.recordList[index].pricingUnit = element.pricingUnit;
          this.recordList[index].totalPrice = element.totalPrice;
          this.onPriceChange()
        }
      });
    },
    onPriceChange(){
      let price = 0;
      this.recordList.forEach(element => {
        price = price + Number(element.coaPrice)
      });
      this.createForm.itemPrice = price;
    },
    confirmData (formData) {
      this.$refs[formData].validate((valid) => {
        if (valid) {
          this.createForm.global = "0";
          this.createForm.expenseItem = this.createForm.expenseItemList.join(",");
          // this.createForm.recordList = this.recordList;
          if (this.createForm.id) {
            storeFinanceCoaUpdate(this.createForm).then((res) => {
              const data = res.data
              if (data.code == 0) {
                this.$message.success('修改成功');
                this.$emit('ok');
                this.closeNetWorker();
              } else {
                this.$message.error(data.data || '修改失败')
              }
            })
          } else {
            storeFinanceCoaAdd(this.createForm).then((res) => {
              const data = res.data
              if (data.code == 0) {
                this.$message.success('新增成功');
                this.$emit('ok');
                this.closeNetWorker();
              } else {
                this.$message.error(data.data || '新增失败')
              }
            })
          }
        }
      });
    },
    closeNetWorker () {
      this.visible = false;
      this.createForm = {};
      this.recordList = [];
    }
  }
};
</script>
<style scoped lang="less"></style>
